<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            
        }
        .all{
            width: 390px;
            height: 100vh;

        }
        .head{
            width: 390px;
            height: 45px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
            /* position: fixed;
            top: 45px; */
        }
        .search{
           margin-top: 10px;
           margin-left: 10px;
        }
        input{
            width: 325px;
        }
        .my{
            width: 30px;
            height: 40px;
            display: flex;
            flex-direction: column;
            border: 1px solid black;
            margin-right: 5px;
            margin-top: 3px;
            
        }
        .my1{
            width: 30px;
            height: 25px;
            border: 1px solid black;
            background-image: url(./head&hotel精灵图.png);
            background-position: 52px 509px;
            background-size: 115px;
        }
        .my2{
            width: 30px;
            height: 15px;
            border: 1px solid black;
        }
        .rail{
            width: 390px;
            height: 78px;
            border: 1px solid black;
            background-image: url(./高铁.jpg);
            background-size: contain;
        }
        .menu{
            width: 390px;
            height: 75px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
        }
        .m{
            height: 75px;
            width: 70px;
            display: flex;
            flex-direction: column;
            /* justify-content: space-between; */
            border: 1px solid;
        }
        .m1{
            width: 50px;
            height: 50px;
            border: 1px solid;
            margin-left: 9px;
        }
        .m2{
            width: 70px;
            height: 20px;
            border: 1px solid;
        }
        .hotel{
            width: 390px;
            height: 270px;
            border: 1px solid black;
        }
        .wifi{
            width: 390px;
            height: 120px;
            border: 1px solid black;
        }
        .act{
            width: 390px;
            height: 60px;
            border: 1px solid black;
        }
        .cun{
            width: 390px;
            height: 315px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="head">
            <div class="search">
                <input type="text" placeholder="       目的地">
            </div>
            <div class="my">
                <div class="my1"></div>
                <div class="my2"></div>
            </div>
        </div>
        <div class="rail"></div>
        <div class="menu">
            <div class="m">
                <div class="m1"></div>
                <div class="m2"></div>
            </div>
            <div class="m">
                <div class="m1"></div>
                <div class="m2"></div>
            </div>
            <div class="m">
                <div class="m1"></div>
                <div class="m2"></div>
            </div>
            <div class="m">
                <div class="m1"></div>
                <div class="m2"></div>
            </div>
            <div class="m">
                <div class="m1"></div>
                <div class="m2"></div>
            </div>
        </div>
        <div class="hotel">
            <div class="h">
                <div class="ht">
                    <div class="htl">
                        <div class="ht1"></div>
                        <div class="ht2"></div>
                    </div>
                    <div class="htr">
                        <div class="htrr">
                            <div class="htrr1"></div>
                            <div class="htrr2"></div>
                        </div>
                    </div>
                </div>
                <div class="hc">
                    <div class="hcl">
                        <div class="hc1"></div>
                        <div class="hc2"></div>
                    </div>
                    <div class="hcr">
                        <div class="hcrr">
                            <div class="hcrr1"></div>
                            <div class="hcrr2"></div>
                        </div>
                    </div>
                </div>
                <div class="hb">
                    <div class="hbl">
                        <div class="hb1"></div>
                        <div class="hb2"></div>
                    </div>
                    <div class="hbr">
                        <div class="hbrr">
                            <div class="hbrr1"></div>
                            <div class="hbrr2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wifi"></div>
        <div class="act"></div>
        <div class="cun"></div>
        
    </div>
</body>
</html>